<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格标签</title>
</head>
<body>

  <!-- table标签就是一个表格 -->
  <table border="1" width="300px" height="400px" cellspacing="0" cellpadding="3" >
    <!-- tr-一行 -->
    <!-- td-一个单元格或者一列 -->

    <!-- th-表头标题标签 默认居中加粗效果 -->
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <!-- 2、
           table、tr td设置水平对齐 -align：left center right
           tr td设置垂直对齐 -valign：top mid bottom
    -->

    <tr align="center" valign="bottom">
      <td valign="top">黄云静</td>
      <td valign="mid">女</td>
      <td valign="bottom">3</td>

    </tr>

    <!-- 3、
      cellspacing -单元格和单元格的外边距 
      cellpadding -单元格和内容的内边距

      单元格合并-设置cellsapcing="0"
      css样式单元格合并-border-collapse：collapse
    
    -->
    <tr>
      <td>黄云静</td>
      <td>女</td>
      <td>3</td>

    </tr>
  </table>

  <!--细线表格 -->
  <table bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr bgcolor="white">
      <td>黄云静</td>
      <td>女</td>
      <td>3</td>
    </tr>

  </table>

  <!-- 完整的表格结构 -->
  <table border="1">
    <!--表格的标题标签  默认居中-->
    <caption align="left">个人信息</caption>
    <!-- 表头标签 -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <!-- 表体标签 -->
    <tbody>
      <tr>
        <td>黄云静</td>
        <td>女</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
  
</body>
</html>